<template>
  <el-dialog
    title="登录"
    :visible.sync="centerDialogVisible"
    width="30%"
    center>

    <el-form  ref="form" :rules="rules"  :model="form" label-width="80px">

      <el-form-item  prop="mobilephone" label="用户名" >
        <el-input v-model="form.mobilephone" ></el-input>
      </el-form-item>

      <el-form-item  prop="loginpwd" label="密码">
        <el-input v-model="form.loginpwd" ></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
    <el-button  type="primary" @click="login">登 录</el-button>
  </span>
  </el-dialog>
</template>
<script>
  import {mapMutations ,mapGetters } from 'vuex'
    export default {
        name: "login",
      data(){
          return {
            centerDialogVisible:false,
            form:{
              loginpwd:'',
              mobilephone:''
            },
            rules: {
              mobilephone: [
                { required: true, message: '请输入账号', trigger: 'blur' },
              ],
              loginpwd: [
                { required: true, message: '请输入密码', trigger: 'blur' }
              ],
            }
          }
      },


      methods:{
          showLogin(backCall){
            if(this.$store.state.authenticated){
              backCall(true);
              return;
            }
            this.backCall = backCall;
            this.centerDialogVisible = true;
            this.$nextTick(()=>{
              this.$refs.form.resetFields();
            })
          },
        async login(){
          this.$refs.form.validate(async (valid) => {
            if (!valid) {
              return
            }
            let data = await this.$post('http://box.imapic.cn/itemapi/api/home/loginuser',this.form,true)
            if(data.success){
              console.log(data)
              window.localStorage.setItem('token',data.Data.Token)
              this.setAuthenticated(data.Data.Token)
              this.centerDialogVisible = false;
            }else {
            }
            this.backCall(data.success)
          });
        },
        ...mapMutations({
          setAuthenticated: 'setAuthenticated'
        })
      }
    }
</script>

<style scoped>

</style>
